<template>
	<view>
		<x-navBar :clickFun='search' routerPath='/pages/search/search'></x-navBar>
		<!-- title部分 -->
		<view class="d-flex aling-centen jfy-sb pg-30">
			<view class="d-flex aling-centen">
				<image style="width: 39rpx; height: 32rpx;" src="../../static/icon/gengduo.png" mode=""></image>
				<text @tap='titleAct=1' class="font-32 ml-20" :class="titleAct==1?'titleAct':'fact'">商品</text>
				<text @tap='titleAct=2' class="font-32 ml-30" :class="titleAct==2?'titleAct':'fact'">莱米产品</text>
			</view>
			<text class="font-24" style="color: #B5B5B5;" v-if="titleAct==1">{{goodsLeng}}件商品</text>
		</view>
		<!-- 商品 -->
		<view class="" :style="{display:titleAct==1?'':'none'}">
			<!-- 筛选导航 -->
			<view class="screenBox d-flex aling-centen pl-30 ">
				<view @tap='this.$refs.popup.show()' class="screenItem d-flex  aling-centen jfy-center font-30 mr-20">
					<text class="textColor-white">筛选</text>
					<image src="../../static/icon/shaixuan.png" mode=""></image>
				</view>
				<scroll-view :scroll-x='true'  :enable-flex='true' class="scroolView ">
					<view class="d-flex aling-centen">
						<view 
						class="item font-30 mr-20" 
						:class="index==actve?'actve':''"
						@tap='screenEvent(index)'
						v-for="(item,index) in topClass" :key='index'
					>{{item.title}}</view>
					</view>
				</scroll-view>
			</view>
			<!-- 商品列表 -->
			<view class="px-30 pt-30">
				<x-goods ref='goodsData' @goodsLength='goodsLength'></x-goods>
			</view>
			<!-- 筛选弹出成 -->
			<view>
				<wybPopup
					ref="popup"
					type="bottom" 
					height="700" 
					width="500" 
					radius="6" 
					:showCloseIcon="true"
				>
					<view class="pg-30 popupBox">
						<view class="">
							<text class="font-30 font-w">筛选</text> 
							<!-- <text style="color: #999;" class="font-26 ml-30">99商品</text> -->
						</view>
						<view  class="scroll d-flex ">
							<!-- 一级导航 -->
							<scroll-view scroll-y="true">
								<view @tap='classFion1(index)' class="py-20" v-for="(item,index) in ['分类','价格','折扣优惠']" :key='index'>
									<text class="mr-20" :class="index==classActve1?'actve':''">{{item}}</text>
									 <u-icon v-if="index==classActve1" name="checkmark" color="#FF890B" size="28"></u-icon>
								</view>
							</scroll-view>
							
							<view class="flex-grow1">
								<!-- 商品分类 -->
								<category v-show="classActve1==0" ref='goodscla' :classLIst='topClass' @goodsClass='goodsClass' @classification='classification'></category>
								<!-- 价格筛选 -->
								<price v-show="classActve1==1" @handleRangeChange='handleRangeChange'></price>
								<!-- 折扣 -->
								<discount v-show="classActve1==2" ref='compnsZk' @zekou='zekou'></discount>
							</view>
						</view>
						<view class="config mt-30">
							<scroll-view scroll-x="true" >
								<view class="d-flex">
									<text class="mr-20" @tap='deleteActve(item,index)' v-for="(item,index) in actveArr" :key='index'>{{item.title}} x</text>
								</view>
							</scroll-view>
						</view>
						<view class="d-flex aling-centen jfy-sb foort">
							<text class="delete" @tap='clearAll'>清楚全部</text>
							<text @tap='submit'>确认</text>
						</view>
					</view>
				</wybPopup>
			</view>
		</view>
		<!-- 莱米产品 -->
		<view class="caimi px-30" :style="{display:titleAct==2?'':'none'}">
			<navigator 
			:url="'/goodsPackage/cmGoodsDter/cmGoodsDter?id='+item.id"
			hover-class="none"
			class="d-flex-yCenter cmitem box-shadow mb-30" 
			v-for="(item,index) in mallLse" :key='index'>
				<view style="font-size: 0;">
					<image :src="item.head_img" mode=""></image>
				</view>
				<view class="d-flex flex-d ml-20 flex-grow1">
					<text class="font-30 font-w">{{item.title}}</text>
					<text class="font-24 text-public-style text-overflow2 mt-30">
						{{item.province}}{{item.city}}{{item.district}}{{item.address}}
					</text>
					<!-- <view style="justify-content: flex-end;" class="d-flex-yCenter">
						<image class="dw" src="../../static/icon/dinwei.png" mode=""></image>
						<text class="font-24 ml-20">1.2km</text>
					</view> -->
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		http_mallgoods_cate_lts,
		http_mall_suppliers_lst
	} from '@/config/apiRouter.js'
		/**
		 * 弹出层/选择规格
		 * 实例方法方法
		 * this.$refs.popup.hide() // 关闭
		 * this.$refs.popup.show() // 显示
		 * */ 
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	import category from './components/category.vue'
	import price from './components/price.vue'
	import discount from './components/discount.vue'
	export default {
		components:{
			wybPopup,
			category,
			price,
			discount
		},
		data() {
			return {
				titleAct:1,
				goodsLeng:0,
				zActve:'',
				actve:0,// 顶部分类项默认选中
				topClass:[],
				classActve1:0,//筛选 1级导航
				actveArr:[],// 选择的类别菜单
				goodsListProps:{
					// cate_id:'',//分类id
					// flag1:1,//折扣区间(低)
					// flag2:9,// 	折扣区间(高)
					// price1:'',// 价格区间(低)
					// price2:'',//	价格区间(高)
				},
				page1:1,
				mallLse:[],// 商家列表
				laz_page:null
				
			}
		},
		watch:{
			titleAct(val){
				if(val==2 && this.mallLse.length<1)this.getMallLst()
			}
		},
		onLoad() {
			http_mallgoods_cate_lts().then(res=>{
				this.topClass=res.data
				this.goodsListProps.cate_id=this.topClass[this.actve].id
				this.getGoodsData()
			})
			
		},
		methods: {
			// 获取门店列表
			getMallLst(type){
				http_mall_suppliers_lst({
					data:{
						limit:10,
						page:this.page1,
					}
				}).then(res=>{
					this.laz_page=res.data.last_page
					type?this.mallLse=this.mallLse.concat(res.data.data):this.mallLse=res.data.data
				})
			},
			// 提交筛选
			submit(){
				this.getGoodsData()
				this.$refs.popup.hide() // 关闭
				if(this.zActve!='') this.actve=this.zActve
			},
			// 清楚全部
			clearAll(){
				this.goodsListProps={}
				this.actveArr=[]
				this.$refs.goodscla.deleteTab();
				this.$refs.compnsZk.deleteZk()
			},
			// 价格选择
			handleRangeChange(e){
				this.actveArr = this.actveArr.filter(res => {
					return res.type != 2
				})
				let obj = {
					type: 2,
					title: '￥' + e[0] + '--￥' + e[1],
				}
				this.actveArr.push(obj)
				this.goodsListProps.price1 = e[0]
				this.goodsListProps.price2 = e[1]
			},
			// 折扣选择
			zekou(item){
				this.actveArr = this.actveArr.filter(res => {
					return res.type != 3
				})
				let obj = {
					type: 3,
					title: item.title,
				}
				this.actveArr.push(obj)
				this.goodsListProps.flag1=item.flag1
				this.goodsListProps.flag2=item.flag2
			},
			classification(data){
				this.goodsClass(data)
				this.zActve=data.index
			},
			// 商品分类选择
			goodsClass(data){
				// console.log(data);
				// type 1为商品分类 每次选择前先过掉之前选择的在从新添加
				this.actveArr=this.actveArr.filter(res=>{
					return res.type!=1
				})
				this.actveArr.push(data.item)
				this.goodsListProps.cate_id=data.item.id
			},
			// 删除所选择的筛选
			deleteActve(item,index){
				// 商品类型
				if(item.type==1){
					this.$refs.goodscla.deleteTab();
					this.goodsListProps.cate_id=''
				}
				// 价格
				if(item.type==2){
					this.goodsListProps.price1=''
					this.goodsListProps.price2=''
				}
				if(item.type==3){
					this.$refs.compnsZk.deleteZk()
					this.goodsListProps.flag1=''
					this.goodsListProps.flag2=''
				}
				this.actveArr.splice(index,1)
			},
			// 获取商品信息
			getGoodsData(){
				this.$refs.goodsData.gerGoodsProp(this.goodsListProps)
			},
			// 顶部分类选择
			screenEvent(index){
				if(this.actve==index)return
				this.actve=index
				console.log(12);
				this.goodsListProps.cate_id=this.topClass[index].id
				this.getGoodsData()
				// 删除筛选中的选择项
				this.$refs.goodscla.deleteTab();
				this.$refs.goodscla.update1Tab();
				this.zActve=''
				// type 1为商品分类 每次选择前先过掉之前选择的在从新添加
				this.actveArr=this.actveArr.filter(res=>{
					return res.type!=1
				})
				
			},
			classFion1(index){ // 筛选 一级导航
				if(this.classActve1==index)return
				this.classActve1=index
			},
			// 商品分类导航选择，由子组件 category 调用 参数 所选择的类型对象参数
			typeSelection(event){
				console.log(event);
			},
			// 当前商品的数量
			goodsLength(e){
				this.goodsLeng=e
			}
		},
		// 上拉触底加载更多
		onReachBottom() {
			if(this.titleAct==1)this.$refs.goodsData.comtsOnReachBottom()
			if(this.titleAct==2 && this.page1<this.laz_page && this.laz_page!=0)this.getMallLst(true)
		},
	}
</script>

<style lang="scss">
	.titleAct{
		color: #FF890B;
	}
	.fact{
		color: #C4C4C4;
	}
	// 筛选
	.screenBox{
		.screenItem{
			width: 150rpx;
			height: 60rpx;
			background: $color-zt;
			border-radius: 6px;
			image{
				width: 30rpx;
				height: 32rpx;
				
			}
		}
		.scroolView{
			overflow: hidden;
			line-height: 60rpx;
			.item{
				min-width: 100rpx;
				line-height: 60rpx;
				padding: 0 25rpx;
				text-align: center;
				background: #EBEBEB;
				border-radius: 6px;
				transition: all 0.1s;
			}
			.actve{
				color: #fff;
				background: $color-zt;
			}
		}
	}
	// 海选弹出
	.popupBox{
		.config{
			text{
				display: inline-block;
				// min-width: 190rpx;
				white-space:nowrap;
				line-height: 50rpx;
				text-align: center;
				padding: 0 20rpx;
				color: #fff;
				background: $color-zt;
				border-radius: 12rpx;
			}
		}
		.scroll{
			height: 458rpx;
			
			&>scroll-view{
				height: 100%;
				width: 33.3%;
				border-right: 1px solid #999;
				overflow-y: scroll;
			}
			.rightBox{
				height: 100%;
				
			}
			.nth{
				border: none;
			}
			.actve{
				color: $color-zt;
			}
		}
		.foort{
			margin-top: 42rpx;
			text{
				display: inline-block;
				width: 330rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				background: $color-zt;
				border-radius: 12rpx;
			}
			.delete{
				background: #ddd;
			}
		}
		.zhekou{
			.actve{
				color: $color-zt;
			}
		}
	}
	.caimi{
		.cmitem{
			image{
				width: 180rpx;
				height: 180rpx;
				border-radius: 12rpx 0px 0px 12rpx;
			}
			.dw{
				width: 20rpx;
				height: 24rpx;
			}
		}
	}
</style>
